import XMultiDimTable, { type ColumnConfig } from 'packages/x-multi-dim-table'
import './index.css'
import { PlusCircleOutlined, SettingOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'
const columns:ColumnConfig[] = [
    {
        title: '项目/任务名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        componentType: 'input',
        editable: true,
        width:300
    },
    {
        title: '负责人',
        dataIndex: 'key2',
        key: 'key2',
        componentType: 'select',
        editable: true,
        width:200
    },
    {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
        componentType: 'input',
        editable: true,
        width:200
    },
    {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        componentType: 'input',
        editable: true,
        width:200
    },
    {
        title: '创建日期',
        dataIndex: 'date',
        key: 'date',
        componentType: 'datePicker',
        editable: true,
        width:200
    },
    // datePicker
]


const project = ['测试项目1', '测试项目二', '测试项目三', '测试项目四', '测试项目五', '测试项目六']
const dataSource = Array.from({ length: 5 }).map((_, i) => ({
    key: i.toString(),
    name: project[i % 5],
    description: '',
    remark: '',
    children: [
        {
            key: `${i}-0`,
            name: `${project[i % 6]}-测试任务1`,
            description: '测试任务1',
            remark: '测试任务1-备注1',
        },
        {
            key: `${i}-1`,
            name: `${project[i % 5]}-测试任务2`,
            description: '测试任务1-备注2',
        },
        {
            key: `${i}-2`,
            name: `${project[i % 5]}-测试任务3`,
            description: '测试任务1-备注3',

        }
    ]
}))
const WorksTable = () => {
    const [containerHeight, setContainerHeight] = useState(0)
    const [containerWidth, setContainerWidth] = useState(0)
    useEffect(() => {
        const container = document.querySelector('.works-table-body')?.getClientRects()
        if (container) {
            setContainerHeight(container[0].height - 80)
            setContainerWidth(container[0].width)
        }

    }, [])
    return (
        <div className='works-table'>
            <div className='works-table-tools'>
                <div className='tools-item pl-2 pr-2 pt-1 pb-1'>
                    <PlusCircleOutlined />
                    <span className='pl-1'>添加</span>
                </div>
                <div className='tools-item pl-2 pr-2 pt-1 pb-1'>
                    <SettingOutlined />
                    <span className='pl-1'>字段配置</span>
                </div>
            </div>
            <div className='works-table-body'>
                <XMultiDimTable
                    dataSource={dataSource}
                    defaultExpandAllRows
                    pagination={false}
                    size="middle"
                    scroll={{ x: containerWidth, y: containerHeight }}
                    bordered={true}
                    tableLayout={'auto'}
                    expandedKeys={[]}
                    columns={columns}
                    rowKey="key"
                />
            </div>
        </div>
    )

}
export default WorksTable